<template>
  <div class="business-root">
    <div class="white-card detail-">
      <div class="rymx-title-c flex flex-between">
        <div class="text-">人员明细</div>
        <div class="flex flex-between tabs">
          <div
            v-for="(item, idx) in rymxTabs.tabs"
            @click="handleChangeTab(item)"
            :key="idx"
            :class="`tab ${item === rymxTabs.active && 'active'}`"
          >
            <span class="border"></span>
            <div class="text">{{ item }}</div>
          </div>
        </div>
      </div>
      <van-loading v-if="loading" type="spinner" color="#1989fa" />
      <template v-if="rymx_.length && !loading">
        <div class="rymx-card" v-for="(item, idx) in rymx_" :key="idx">
          <img class="icon p1" src="~@assets/imgs/businessLine/rymx_user.png" alt="" />

          <div class="flex">
            <span class="name">{{ item.level_name }}</span>
            <span class="tag">{{ item.stm_post_name }}</span>
          </div>
          <div class="flex kv-s">
            <template v-for="(ite, ind) in dataConfig">
              <div :key="ind + '12'">
                <div class="k-">{{ ite.label }}</div>
                <div
                  class="v-"
                  :class="{ 'num-underline': Number(item[dataModel[ite.model]]) > 0 }"
                  @click="
                    $emit('openDialog', {
                      num: item[dataModel[ite.model]],
                      clickType: rymxTabs.active === '智家产品' ? 'zjcp' : 'normal',
                      params: { kpiCode: ite.kpiCode, staffId: item.staff_id },
                    })
                  "
                >
                  {{ item[dataModel[ite.model]] || 0 }}/{{ item[dataModel[ite.mbModel]] || 0 }}
                </div>
              </div>
            </template>
          </div>
        </div>
        <div class="see-more" v-if="allListLength > rymx_.length" @click="handleShowMore">查看更多</div>
      </template>
      <div v-if="!rymx_.length && !loading" class="no-data-container"></div>
    </div>
  </div>
</template>
<script>
let _list = []

import { _ywsjListV2, _kdListV2, _zjcpIPTVListV2 } from '../../common'
import { deepClone } from '@/utils/util.js'
const _config = {
  移网手机: _ywsjListV2,
  宽带: _kdListV2,
  智家产品: _zjcpIPTVListV2,
}
export default {
  name: 'GdwyyAppRymxNoJf',
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    dataModel: {
      type: Object,
      default: () => {
        return {}
      },
    },
    loading: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rymxTabs: {
        tabs: ['移网手机', '宽带', '智家产品'],
        active: '移网手机',
      },
      rymx_: [],
      allListLength: 0,
    }
  },

  computed: {
    dataConfig() {
      return _config[this.rymxTabs.active]
    },
  },

  watch: {
    data: {
      immediate: true,
      handler(nv, ov) {
        this.rymxTabs.active = '移网手机'
        if (!nv.length || ov.length) {
          this.rymx_ = []
          _list = []
          this.allListLength = 0
          return
        }
        this.rymxHooks(nv)
      },
    },
  },
  methods: {
    handleChangeTab(id) {
      if (id === this.rymxTabs.active) return
      this.rymxTabs.active = id
    },
    rymxHooks(data) {
      // 缓存
      _list = deepClone(data)
      this.allListLength = data.length
      this.handleShowMore()
    },
    handleShowMore() {
      let res = _list.splice(0, 3)
      this.rymx_.push(...res)
    },
  },
}
</script>
<style lang="less" scoped>
@import '~@assets/less/reconsitution/common.less';
.see-more {
  font-size: 3.2vw;
  color: #999999;
  letter-spacing: -0.0373vw;
  margin: 3.2vw auto 3.4667vw;
  text-align: center;
}

.num-underline {
  text-decoration: underline;
}
.flex {
  display: flex;
  align-items: center;
}

.flex-between {
  justify-content: space-between;
}

.center {
  justify-content: center;
  text-align: center;
  align-items: center;
}

.bold {
  // font-weight: bold;
}

.business-root {
  padding: 0 2.1333vw;

  .white-card {
    background-color: #fff;
    border-radius: 1.6vw;
    padding: 3.2vw 2.1333vw;
  }

  .detail- {
    .title-h1 {
      font-size: 4.5333vw;
      color: #333333;
      letter-spacing: -0.16vw;
      font-weight: bold;
      align-items: center;

      .icon {
        width: 4.2667vw;
        height: 4.2667vw;
      }

      .text- {
        padding: 0 2.6667vw 0 1.8667vw;
      }

      ::v-deep .van-icon-play {
        transform: rotate(90deg);
        color: #aaaaaa;
      }
    }

    .cards-3 {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 2.6667vw;
      margin-top: 3.2vw;

      .title- {
        line-height: 5.3333vw;
        margin-left: 2.1333vw;
        font-size: 3.7333vw;
        color: #333333;
        letter-spacing: -0.0427vw;
      }

      .icon- {
        width: 3.7333vw;
        height: 3.7333vw;
      }

      .k- {
        font-size: 3.2vw;
        color: #999999;
        letter-spacing: -0.0373vw;
        line-height: 4.5333vw;
      }

      .main .k- {
        margin-top: 1.6vw;
      }

      .v- {
        font-size: 6.4vw;
        color: #4d98ff;
        letter-spacing: -0.0747vw;
        line-height: 8.8vw;
        margin-bottom: 4.2667vw;
      }

      .card {
        flex: 1;
        padding: 3.2vw 2.6667vw 1.3333vw;
        background-size: 100% 100%;

        .kv-s {
          display: grid;
          line-height: 4.5333vw;

          .k- {
            position: relative;
            padding-left: 2.6667vw;

            &::before {
              position: absolute;
              content: '';
              border: 0.2667vw solid #4d98ff;
              left: 0;
              top: 50%;
              transform: translateY(-50%);
              width: 1.0667vw;
              height: 1.0667vw;
              border-radius: 1.0667vw;
              box-sizing: border-box;
            }
          }
        }
      }

      .card0,
      .card1 {
        background-image: url('~@assets/imgs/businessLine/yyx_zbcard1.png');

        .kv-s {
          row-gap: 1.8667vw;
        }
      }

      .card2 {
        grid-column: span 2;
        display: flex;
        background-image: url('~@assets/imgs/businessLine/yyx_zbcard2.png');

        .main {
          width: 47.2vw;

          .v- {
            margin-bottom: unset;
          }
        }

        .k-top {
          margin-top: 4.5333vw;
        }

        .kv-s {
          row-gap: 2.1333vw;
          flex: 1;
        }
      }
    }

    .rymx-title-c {
      padding-top: 3.0667vw;
      // margin-top: 3.0667vw;
      // border-top: 0.2667vw dashed rgba(77, 152, 255, 0.4);

      .tabs {
        column-gap: 8vw;
        font-size: 3.4667vw;
        color: #999999;

        .border {
          visibility: hidden;
        }

        .active {
          color: #4d98ff;
          position: relative;

          .text {
            z-index: 2;
            position: relative;
          }

          .border {
            visibility: unset;
            position: absolute;
            content: '';
            background-color: #e1ecfd;
            height: 1.3333vw;
            border-radius: 0.5333vw;
            left: 0;
            right: 0;
            bottom: 0;
          }
        }
      }

      .text- {
        font-size: 4.2667vw;
        color: #000000;
        position: relative;
        padding-left: 2.1333vw;

        &::before {
          position: absolute;
          content: '';
          width: 1.0667vw;
          height: 4.8vw;
          background: #4d98ff;
          border-radius: 0.5333vw;
          top: 50%;
          left: 0;
          transform: translateY(-50%);
        }
      }
    }

    .rymx-card {
      display: grid;
      grid-template-columns: 10.6667vw auto;
      column-gap: 3.7333vw;
      row-gap: 3.2vw;
      background: rgba(77, 152, 255, 0.03);
      border-radius: 1.6vw;
      margin-top: 3.2vw;
      padding: 2.1333vw 2.6667vw;

      .p1 {
        grid-row: span 2;
        width: 10.6667vw;
        height: 10.6667vw;
        align-self: center;
      }

      .name {
        font-size: 4vw;
        color: #333333;
        letter-spacing: -0.0453vw;
        font-weight: bold;
        line-height: 5.6vw;
      }

      .tag {
        line-height: 4.2667vw;
        box-sizing: border-box;
        font-size: 3.2vw;
        color: #4d98ff;
        letter-spacing: -0.0373vw;
        padding: 0 1.6vw;
        margin-left: 3.4667vw;
        border: 0.2667vw solid #4d98ff;
        border-radius: 0.8vw 4.2667vw 0.8vw 4.2667vw;
      }

      .kv-s {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
      }

      .k- {
        font-size: 3.2vw;
        color: #666666;
        line-height: 4.5333vw;
        letter-spacing: -0.0373vw;
        margin-bottom: 1.0667vw;
      }

      .v- {
        // font-weight: bold;
        font-size: 3.7333vw;
        line-height: 5.3333vw;
        color: #fd806e;
        letter-spacing: -0.0427vw;
      }
    }
  }
}
</style>